<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .preview_img{
            margin: 100px;
            position: relative;
            height: 398px;
        }
        .pre {
            width:400px;
            height:400px;
        }
        .big{
            position: absolute;
            display: none;
            width: 500px;
            height: 500px;
            left: 450px;
            top: 0;
            border: 1px solid black;
            overflow: hidden;
        }
        .bigImg{
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .mask{
            left: 0;
            top:0;
            display: none;
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: beige;
            opacity: .5;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="preview_img">
        <img src="img/1.webp" alt="" class="pre">
        <div class="mask"></div>
        <div class="big">
            <img src="img/1.webp" alt="" class="bigImg">
        </div>
    </div>
    <script>
        //1.获取元素
        var preview_img = document.querySelector(".preview_img");
        var pre = document.querySelector('.pre')
        var mask = document.querySelector(".mask")
        var big = document.querySelector('.big')
        var bigImg = document.querySelector('.bigImg')
        //2.preview_img图片绑定mouseover事件时将图片上的遮罩层以及右边的放大图片显示出
        preview_img.addEventListener('mouseover',function(){
            mask.style.display = 'block'
            big.style.display = 'block'
        })
        //2.preview_img图片绑定mouseout事件时将图片上的遮罩层以及右边的放大图片隐藏掉
        preview_img.addEventListener('mouseout',function(){
            mask.style.display = 'none'
            big.style.display = 'none'
        })
        //3.将鼠标在preview_img盒子中移动时候的坐标 赋值给mask 的left 与 top
        preview_img.addEventListener('mousemove',function(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //4.将mask的移动区域 限制在左边小图片中
            var maskX = x - mask.offsetWidth/2
            var maskY = y -mask.offsetHeight/2
            //左边盒子移动的最大距离
            var boxMax = pre.offsetWidth - mask.offsetWidth
            if(maskX <=0){
                maskX = 0
            } else if(maskX >= boxMax){
                maskX = boxMax
            }
            mask.style.left = maskX  + 'px'
            if(maskY <= 0){
                maskY = 0
            } else if(maskY >= boxMax){
                maskY = boxMax
            }
            mask.style.top = maskY + 'px'
            //左边盒子的移动距离/左边盒子移动最大距离 = 右边盒子移动的距离/右边盒子移动最大距离
            //所以右边盒子移动的距离 = 左边盒子移动的距离*右边盒子移动最大距离 / 左边盒子移动最大距离
            //右边盒子移动的最大距离
            var bigMax = bigImg.offsetWidth - big.offsetWidth
            //右边盒子移动的距离
            var bigX = maskX*bigMax/boxMax
            var bigY = maskY*bigMax/boxMax
            bigImg.style.left = -bigX+'px'
            bigImg.style.top = -bigY+'px'
        })
    </script>
</body>
</html>